<template>
	<view class="page-content">
		<u-loading-page :loading="pageLoading" style="z-index: 10;"></u-loading-page>
		<view v-show="!pageLoading">
			<u-alert type="warning" :description="configInfo.recharge_off_tips" v-if="configInfo.recharge_off_tips"></u-alert>
			<view class="pay-step m-md p-md radius-5">
				<view class="item">
					1、保存并识别下面收款码
				</view>
				<view class="item m-t-sm m-b-sm flex-start">
					2、输入金额 
					<text class="number text-warning m-l-sm m-r-sm text-lg">¥ {{ order_info.order_price }}</text>
					<u-button type="error" text="复制金额" size="mini" style="width: 120rpx;margin: 0" @click="$util.copyText(order_info.order_price)"></u-button>
				</view>
				<view class="item">
					3、输入备注："支付订单：{{ order_num }}"
					<view class="m-t-sm">
						<u-button type="error" text="复制备注" size="mini" style="margin: 0" @click="$util.copyText('支付订单：'+order_num)"></u-button>
					</view>
				</view>
			</view>
			<view class="pay-code m-md flex-center">
				<image :src="configInfo.recharge_off_code" mode="widthFix" style="width: 100%;" @click="$util.previewImage(configInfo.recharge_off_code)"></image>
			</view>
			<view class="flex-center">
				<text class="text-xs text-danger">若支付后长时间未完成请及时联系平台客服进行处理</text>
			</view>
			<side-tools :scrollTop="scrollTop"></side-tools>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				pageLoading: true,
				order_num: null,
				order_info: [],
				scrollTop: 0,
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		onLoad(option){
			let {
				num
			} = option
			if(!num){
				this.$util.showToast('订单号不能为空')
				return;
			}
			this.order_num = num
			this.getOrderInfo()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			async getOrderInfo(){
				const res = await this.$api.pay.getPayInfo({'order_num':this.order_num});
				if(res.code == 200){
					this.pageLoading = false
					this.order_info = res.data
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.pay-step{
		color: #333;
		background-color: #fff;
		font-size: 28rpx;
	}
	.pay-code image{
		width: 80%!important;
	}
</style>
